<!-- 团结结算查看 -->
<template>
	<div>
		<el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item :to="{ path: '/groupAwardApply'}">团奖申请</el-breadcrumb-item>
			<el-breadcrumb-item>查看</el-breadcrumb-item>
		</el-breadcrumb>
		<p>选择结佣项目：{{groupinfo.devName}}</p>
		<p>选择结佣方式: {{groupinfo.settleCommMode | filtersettleCommMode}}</p>
		<div v-if="groupinfo.settleCommMode == 0 || groupinfo.settleCommMode == 2">
			<p>姓名：   {{groupinfo.name}}</p>
			<p>手机号：{{groupinfo.mobile}}</p>
			<p>身份证：{{groupinfo.idCard}}</p>
		</div>
		<div  v-if="groupinfo.settleCommMode == 1">
			<p>开户名称：{{groupinfo.bankName}}</p>
			<p>开户行名称：{{groupinfo.openBank}}</p>
			<p>开户账号：{{groupinfo.bankAccount}}</p>
			<p>公司名称：{{groupinfo.companyName}}</p>
		</div>
		<div  v-if="groupinfo.settleCommMode == 2">
			<p>开户行所在省：{{groupinfo.openBankProvince}}</p>
			<p>开户行所在市：{{groupinfo.openBankCity}}</p>
			<p>开户行：{{groupinfo.openBank}}</p>
			<p>开户支行：{{groupinfo.bankBranch}}</p>
			<p>开户账号：{{groupinfo.bankAccount}}</p>
		</div>
		<hr>
		<p>
			<span style="margin-right: 20px">应发团奖：{{groupinfo.shouldTeamReward |initCash}}</span>
			<span style="margin-right: 20px">应扣税费: {{groupinfo.shouldDeductTax |initCash}}</span>
			<span style="margin-right: 20px">实发团奖：{{groupinfo.actualTeamReward |initCash}}</span>
		</p>
		<el-table :data="tableData" border style="width: 75%">
			<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column label="城市" prop="cityName" align="center"></el-table-column>
			<el-table-column label="客户姓名" prop="customerName" align="center"></el-table-column>
			<el-table-column label="手机号" prop="customerPhone" align="center"  :formatter="initphone"></el-table-column>
			<el-table-column label="楼盘名称" prop="devName" align="center"></el-table-column>
			<el-table-column label="房号" prop="houseInfo" align="center"></el-table-column>
			<el-table-column label="客户状态" prop="nodeName" align="center"></el-table-column>
			<el-table-column label="应结团奖" prop="shouldTeamReward" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.shouldTeamReward|initCash}}</span>
				</template>
			</el-table-column>
			<el-table-column label="交易时间" prop="tradeTime" align="center"></el-table-column>
			<el-table-column label="是否符合标准" prop="conformStandard" align="center">
				<template  slot-scope="scope">
					<span v-if="scope.row.conformStandard==0">无</span>
					<span v-if="scope.row.conformStandard==1">是</span>
					<span v-if="scope.row.conformStandard==2">否</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				style="margin-top: 10px"
		        background
		        layout="total, sizes, prev, pager, next"
		        :current-page.sync="ruleForm.pageNum"
		        :page-sizes="[10, 20, 30, 40]"
		        :page-size="ruleForm.pageSize"
		        @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :total="totalSize">
		</el-pagination>
		<p>
			*好生活内部决策审批：
			<Upload v-if="decisionApproval.length>0" :multiple="true"  :fileList="decisionApproval" readonly/>
		</p>
		<p>
			*好生活结佣确认表:
			<Upload v-if="settleCommConfirm.length>0" :multiple="true"  :fileList="settleCommConfirm" readonly/>
		</p>
		<!-- 第三方 -->
		<p v-if="groupinfo.settleCommMode==1">
			*好生活付款明细：
			<Upload v-if="paymentDetails.length>0" :multiple="true"  :fileList="paymentDetails" readonly/>
		</p>
		<!-- 劳务所得 -->
		<p v-if="groupinfo.settleCommMode==2">
			*身份证复印件：
			<Upload v-if="idCardCopyFile.length>0" :multiple="true"  :fileList="idCardCopyFile" readonly/>
		</p>
		<p v-if="groupinfo.settleCommMode==2">
			*银行卡复印件：
			<Upload v-if="bankCardCopyFile.length>0" :multiple="true"  :fileList="bankCardCopyFile" readonly/>
		</p>
		<p>
			审核理由： {{groupinfo.approvalComments}}
		</p>
		<p style="text-align: center">
			<el-button type="primary" @click="$router.push({path: '/groupAwardApply'})">返回</el-button>
		</p>
	</div>
</template>

<script>
	import Upload from '@/components/common/Upload'
	import api from '@/api/apiPath'
	export default {
		components: {Upload},
	    data() {
		return {
				alldata:[],
				tableData:[],
				ruleForm:{
					type:0,
					taxation:'',
					serviceCharge:'',
					desc:'',
					pageNum: 0,
					pageSize: 10,
				},
				totalSize: 0,
				groupinfo:{},
				decisionApproval:[],//好生活内部决策审批
				settleCommConfirm:[],//好生活结佣确认表
				paymentDetails:[],//付款明细（只有第三方时需要传）
				idCardCopyFile:[],//身份证复印件（只有个人劳务所得需要传
				bankCardCopyFile:[],//银行卡复印件（只有个人劳务所得需要传）
	        }
	    },

		created(){
			this.getinfo()
		},
		filters:{
			initCash(cellValue){
				if (!cellValue && cellValue !== 0) {
					return
				}
				if(cellValue !== 0){
				    return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
				}
				if(cellValue == 0){
				    return "0.00"
				}
			},
			filtersettleCommMode(val){
				if (val == 0) {
					return '购物卡'
				}else if(val == 1){
					return '第三方'
				}else if(val == 2){
					return '劳务所得'
				}
			}
		},
		methods:{
			initphone(row, column, cellValue, index){
				if (cellValue) {
					var pat=/(\d{3})\d*(\d{4})/
					return cellValue.replace(pat,'$1****$2')
				}
			},
			getinfo(){
				this.axios.post(api.VIEWTEAMREWARDAPPLY,{batchId:this.$route.query.id}).then(res=>{
					if (res.data.code == 200) {
						this.groupinfo = res.data.data.teamRewardApply
						this.alldata = res.data.data.teamRewardOrderList
						this.handleCurrentChange(1)
						this.totalSize = this.alldata.length
						this.decisionApproval = JSON.parse(this.groupinfo.decisionApproval)
						this.settleCommConfirm =  JSON.parse(this.groupinfo.settleCommConfirm)
						if (this.groupinfo.paymentDetails) {
							this.paymentDetails = JSON.parse(this.groupinfo.paymentDetails)
						}
						if (this.groupinfo.idCardCopyFile) {
							this.idCardCopyFile = JSON.parse(this.groupinfo.idCardCopyFile)
						}
						if (this.groupinfo.bankCardCopyFile) {
							this.bankCardCopyFile = JSON.parse(this.groupinfo.bankCardCopyFile)
						}

					}
				})
			},
			handleCurrentChange(page) {
				this.ruleForm.pageNum = page
				this.tableData = this.alldata.slice((this.ruleForm.pageNum - 1) * this.ruleForm.pageSize, this.ruleForm.pageNum * this.ruleForm.pageSize);
			},
			handleSizeChange(page) {
				this.ruleForm.pageSize = page
				this.ruleForm.pageNum = 1
				this.tableData = this.alldata.slice((this.ruleForm.pageNum - 1) * this.ruleForm.pageSize, this.ruleForm.pageNum * this.ruleForm.pageSize);
			}
		}
	}
</script>
<style lang="stylus">
	.des
		vertical-align:top;
		width: 75%;
		textarea
			min-height: 180px !important;

</style>
